<template>
  <div class="personal-signature">
    <div class="info-content">
      <!-- 头部展示 -->
      <div class="info-top-title">
        <div>
          <span class="myInfo">个性签名</span
          ><span class="english">Personal signature</span>
          <span class="asd"></span>
        </div>
      </div>
      <!-- 我的信息展示 -->
      <div class="show-user-info">
        <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">个性签名</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="signature"
              style="height:120px"
            >
            </el-input>
          </div>
        </div>
      </div>
      <div class="submit-info">
        <el-button @click="submitSignatrue" type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "PersonalSignature",

  data() {
    return {
      signature: "",
      userId:this.$store.state.user
    };
  },
  mounted(){
    //初始化数据
    this.initSingnature();
  },
  methods:{
     initSingnature(){
       if(this.$store.state.userInfo.userSignature != null){
         this.signature = this.$store.state.userInfo.userSignature;
       }
       
    },
    submitSignatrue(){
      const that = this;
      //提交修改数据
      if(this.userId != 0 || this.userId != null){
         axios({
            method:"post",
            url:"/aabbcc/user/userSignatrue",
            params:{
              userId:that.userId,
              userSignature:that.signature+""
            }
          }).then(function(res){
              if(res.data.code == 200){
                that.open2(res.data.massage)
                that.$store.commit("handlerUser", {
                    userInfo: res.data.obj,

                  });
            setTimeout(() => {
             location.reload();
            }, 4000);
          }else{
             that.open4(res.data.massage)
          }
          })
      }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  }
};
</script>

<style scoped>
.personal-signature {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
  color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
/* 我的信息展示 */
.show-user-info {
  width: 100%;
  margin-top: 30px;
}
.form-group {
  display: flex;
  margin-bottom: 20px;
}
.form-group .group-name  {
  width: 8%;
  margin-left: 70px;
  color: #2882c5;
  font-weight: 600;
  font-size: 16px;
  text-align: right;
  line-height: 39px;
}
.form-group .group-input  {
  margin-left: 20px;
  width: 500px;
}
.input-login {
  width: 100%;
}
.submit-info {
  width: 100%;
  height: 71px;
  position: relative;
  /* display: block; */
  top: 20px;
}
.submit-info button {
  position: absolute;
  right: 0;
}


</style>